<#assign ctx = request.contextPath />
<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
	    <title>下单</title>
	    <link href="${ctx}/assets/css/bootstrap.min.css" rel="stylesheet"/>
	    <link href="${ctx}/assets/css/weixing.css" rel="stylesheet"/>
	    <link href="${ctx}/assets/css/sco.message.css" rel="stylesheet"/>
	    <style>
			/* autocomplete */
			div.ac {border: 1px solid #ccc;position: absolute;display: none;overflow: auto;background-color: #ffffff;z-index:998;}
			div.ac > ul {margin-top:10px;padding:0;}
			div.ac > ul > li {height:33px;line-height:33px;cursor:pointer;}
			div.ac > ul > li:hover{background:#eee;}
			div.ac > ul > li > div span {padding-left:15px;}
			div.ac > ul > li > div span em {color:red;font-style: normal;}
		</style>
	</head>
		
	<body>
		<form id="submit_form" action="${ctx}/wx/v1/ConsumerManager/bookPost" method="post">
	  		<input type="hidden" id="id" name="id" value="${weixinManager.id}">
			<input type="hidden" id="lng" name="longitude" value="${weixinManager.longitude}">
			<input type="hidden" id="lat" name="latitude" value="${weixinManager.latitude}">
					
		  	<div class="form-group">
		  		<div class="form-wa">
		  			<p><a style="color:#FF0000;">*</a><b>预约地（若不改变默认地点，则无需修改）</b></p>
					<input name="place" id="place" class="form-control floating-label" type="text" value="${weixinManager.place}">
				</div>
			</div>
			<div class="form-group"  class="form-wa">
				<div class="form-wa">
		  			<p><a style="color:#FF0000;">*</a><b>所需服务人员人数</b></p>
					<input name="driverNum" id="driverNum" class="form-control floating-label" type="text" placeholder="">
				</div>
			</div>
			<div class="form-group"  class="form-wa">
				<div class="form-wa">
		  			<p><a style="color:#FF0000;">*</a><b>客户电话</b></p>
					<input name="clientPhone" id="clientPhone" class="form-control floating-label" type="text" placeholder="">
				</div>
			</div>
			<div class="form-group"  class="form-wa">
				<div class="form-wa">
		  			<p><b>客户姓名</b></p>
					<input name="clientName" id="clientName" class="form-control floating-label" type="text" placeholder="">
				</div>
			</div>
			
			<div class="denglu">
				<button id="submit_button" type="button" class="btn btn-default btn-block" style="color:#ffffff">提交</button>
			</div>
		</form>
		
		<script src="${ctx}/assets/js/jquery-1.11.0.min.js"></script>
	    <script src="${ctx}/assets/js/bootstrap.min.js"></script>
	    <script src="${ctx}/assets/js/sco.message.js"></script>
		<script src="${ctx}/assets/js/idcardvalid.js" type="text/javascript"></script>
		<script src="${ctx}/assets/js/jquery.autocomplete.min.js"></script>
		<script type="text/javascript">
			
			$(function () {
	
				//位置获取
				var city;
				navigator.geolocation.getCurrentPosition(function (position) {
				
				    var coords = position.coords;
				    
				    var loc = coords.latitude+','+coords.longitude;
				
				    var param = {ak:'0Bf0928e769210fd88e064cd0cdf84d8',location:loc,output:'json',pois:0,coordtype:'wgs84ll'};
				    
					$.ajax({
						url:"https://api.map.baidu.com/geocoder/v2/",
						type:"GET",
						async:false,
						dataType:'jsonp',
						jsonp:'callback',
						data:param,
						success:function(resp){
							if(null!=resp && ""!=resp && resp.status == 0){
								city=resp.result.addressComponent.city;
							}
						}
					});
				
				},function(error){
				    switch(error.code) {
				        case error.TIMEOUT:
				        	$.scojs_message("定位超时，请刷新重试。", $.scojs_message.TYPE_ERROR);
				        	$("#place").attr('placeholder','定位失败，请输入地址');
				          	break;
				        case error.POSITION_UNAVAILABLE:
				        	$.scojs_message("未能获取到位置信息，请稍后再试。", $.scojs_message.TYPE_ERROR);
				            break;
				        case error.PERMISSION_DENIED:
				        	$.scojs_message("请先允许定位。", $.scojs_message.TYPE_ERROR);
				            break;
				        case error.UNKNOWN_ERROR:
				        	$.scojs_message("未知错误。", $.scojs_message.TYPE_ERROR);
				            break;
				    }
				},{enableHighAccuracy:true,timeout:5000,maximumAge:30000});
				
				
				$('#place').AutoComplete({
				    'data': '${ctx}/wx/v1/getAddress',
					ajaxDataType: 'json',
					ajaxParams:function(keyword){
						return {'city':city};
					},
				    'width': 'auto',
				    'async': true,
				    'listStyle': 'custom',
				    'emphasis': false,
				    'matchHandler': function(keyword, data){
				        return true;
				    },
				    'createItemHandler': function(index, data){
				    	return "<span>"+data.name+"</span>";
				    },
				    'afterSelectedHandler': function(data){
				    	$('#place').val(data.name);
				    	$('#lng').val(data.lng);
				    	$('#lat').val(data.lat);
				    }
				}).AutoComplete('show');
				
				
				//提交
				$("#submit_button").click(function(){
					if($.trim($("#place").val()).length==0 || !$("#lng").val() || !$("#lat").val()){
						$.scojs_message("请填写预约地。", $.scojs_message.TYPE_ERROR);
						return;
					}
					
					var isdriverNum=/^\+?[1-9][0-9]*$/;
					if (!isdriverNum.test($("#driverNum").val())){
						$.scojs_message("请填写所需服务人员人数，最少为1人。", $.scojs_message.TYPE_ERROR);
						return;
					}
					
					var isphone=/^\+?\d{3,13}(\-?(\d{6,8}?))?(\-?(\d{4,8}?))*$/; 
					if (!isphone.test($("#clientPhone").val())){
						$.scojs_message("请填写正确的电话号码。", $.scojs_message.TYPE_ERROR);
						return;
					}
					
				    $(this).attr("disabled",true);
				    
				    $.post($("#submit_form").attr("action"),{
				    		'id':$("#id").val(),
				    		'longitude':$("#lng").val(),
				    		'latitude':$("#lat").val(),
				    		'place':encodeURI($("#place").val()),
				    		'driverNum':$("#driverNum").val(),
				    		'clientPhone':$("#clientPhone").val(),
				    		'clientName':encodeURI($("#clientName").val())
				    	},
				    	function(result){
					    	if(result.success){
					    		$.scojs_message("下单成功。", $.scojs_message.TYPE_OK);
					    		setTimeout(function(){
					    			WeixinJSBridge.call('closeWindow');
					    		}, 2000);
					    	}
					    	else{
					    		$.scojs_message(result.message, $.scojs_message.TYPE_ERROR);
					    		$("#submit_button").attr("disabled",false);
					    	}
					});
					
				});
			});
		</script>
	</body>
</html>
	